<template>
  <div class="banner" v-if="newList.length > 0">
    <el-carousel
      :interval="10000"
      :indicator-position="newList.length > 1 ? '' : 'none'"
    >
      <el-carousel-item v-for="item of newList" :key="item.id">
        <el-image
          :src="item.imgUrl"
          fit="fill"
          v-default-img="defaultImg"
          @click="toDetail(item.jumpType, item.jumpUrl)"
        ></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
export default {
  name: "Banner",
  props: {
    list: {
      type: Array,
    },
  },
  data() {
    return {
      defaultImg: require("@/assets/images/default-banner-cover.png"),
      swiperOption: {
        loop: true,
        loopedSlides: 3, // 必设不然最后一张右边没元素
        lazy: {
          loadPrevNext: true, //图片延迟加载
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        autoplay: {
          delay: 10000,
          // stopOnLastSlide: false,
          disableOnInteraction: false,
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
    newList() {
      if (this.list && this.list.length > 0) {
        if (this.list.length <= 1) {
          this.isLoop(false);
        }
        return this.list;
      } else {
        return [];
      }
    },
  },
  components: {},
  mounted() {},
  methods: {
    isLoop(flag) {
      this.swiperOption.loop = flag;
    },
    toDetail(type, jumpUrl) {
      // 阅读器
      if (type === 0) {
        this.$router.push({
          name: "bookDetail",
          params: { id: jumpUrl },
        });
      } else if (type === 1) {
        window.open(jumpUrl, "_blank");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 443px;
  ::v-deep .el-carousel__container {
    height: 443px;
    .el-carousel__item {
      cursor: pointer;
      .el-image {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
